import React, { useEffect, useState } from 'react'

import PubSub from 'pubsub-js'

import Item from './Item'

export default function List() {
  //定义一个state值是空数组
  const [listValue, setlistValue] = useState({ isInit: true, isSearch: false, data: [] })

  //在初始化时获得订阅的数据
  useEffect(() => {
    //通过PubSub.subscribe拿到订阅的值  在回调函数的第二个参数上
    PubSub.subscribe('github', (_, data) => {
      console.log(data, 'data');
      //请求回来的值设置在state中 方便后面使用传递给item组件
      setlistValue(data)
    })
  }, [])

  return (
    <div className="row">
      {/* 遍历 */}
      {
        listValue.isInit ? <h1>请开始搜索</h1> :
          listValue.isSearch ? <h1>正在搜索...</h1> :
            listValue.data.map(item => {
              return <Item key={item.id} {...item} />
              // 传递给item
            })
      }
    </div>
  )
}
